<template>
    <div class="mmv-op-list-banner">
        <a href target="_blank">
            <img :src="banner.banner" class="mmv-op-list-banner__img" />
            <p class="mmv-op-list-banner__title">{{banner.subject}}</p>
        </a>
    </div>
</template>

<script>
export default {
    props: {
        banner: {
            type: Object,
            default: () => ({}),
        },
    },
};
</script>

<style lang="less">
.mmv-op-list-banner {
    width: 240px;
    height: 136px;
    position: relative;
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
    &__img {
        width: 100%;
        height: 100%;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        object-fit: cover;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    &__title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>